<script setup>
import { ref, getCurrentInstance, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";

import markerIcon from "@/assets/images/pc/marker.png";
import modelIcon from "@/assets/images/pc/model.png";
import scheduleIcon from "@/assets/images/pc/schedule.png";
import roamIcon from "@/assets/images/bim/roam.png";
const { proxy } = getCurrentInstance();

const route = useRouter();

const menuList = ref([
  {
    name: "模型",
    icon: modelIcon,
    path: "/pc/model"
  },
  {
    name: "型号",
    icon: markerIcon,
    path: "/pc/marker"
  },
  {
    name: "进度",
    icon: scheduleIcon,
    path: "/pc/schedule"
  },
  {
    name:"平台",
    icon:roamIcon,
    path:"/pc"
  }
]);


const showJumpDialog = ref(false)

const jumpToInspect = () => {
        showJumpDialog.value = true

}

const handleJumpConfirm = () => {
  showJumpDialog.value = false
  window.open('https://cloud.pcmes.cn/project/detail/spuList?projectId=13927', '_blank')
}

//默认展示
const menuActive = ref(-1);
const activeRoute = sessionStorage.getItem("pcActiveRoute");
if (activeRoute == null) {
  menuActive.value = 0;
  sessionStorage.setItem("pcActiveRoute", 0);
  route.push("/pc/model");
} else {
  menuActive.value = activeRoute;
}

const menuHandleClick = function (item,index) {
  if (menuActive.value == index) return;
  if(index==3){
    jumpToInspect()
  }else{
    sessionStorage.setItem("pcActiveRoute", index);
  route.push(item.path);
  menuActive.value = index;
  }

};

onMounted(() => {});
onUnmounted(() => {
  window.sessionStorage.removeItem("pcActiveRoute");
});
</script>

<template>
  <div class="container">
    <div class="menu">
      <div
        class="menu-item"
        v-for="(item, index) in menuList"
        :key="index"
        :class="menuActive == index ? 'active' : ''"
        @click="menuHandleClick(item,index)"
      >
        <img :src="item.icon" />
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div class="right-sider">
      <router-view></router-view>
    </div>
  </div>
  <el-dialog v-model="showJumpDialog" title="跳转提示" width="30%" :close-on-click-modal="false" :draggable="true">
    <span>即将跳转到PC构件平台，是否继续？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showJumpDialog = false">取消</el-button>
        <el-button type="primary" @click="handleJumpConfirm"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: calc(100vh - 65px);
  font-family: SourceHanSansSC;
  display: flex;

  .menu {
    width: 55px;
    height: 100%;
    background: #394880;
    color: #ffffff;
    padding-top: 10px;
    box-sizing: border-box;

    .menu-item {
      width: 100%;
      padding: 5px 0px;
      box-sizing: border-box;
      text-align: center;
      cursor: pointer;
      margin-bottom: 10px;

      img {
        display: block;
        margin: auto;
        width: 25px;
        height: 25px;
      }

      span {
        font-size: 12px;
      }

      &.active {
        background: #6e91fb;
        border-radius: 5px;
      }
    }
  }

  .right-sider {
    width: calc(100% - 55px);
    padding: 10px;
    box-sizing: border-box;
  }
}
</style>
